<template>
	<div class="comment-editor" ref="container">
		<div class="input-wrapper" :class="{inline}">
			<input-box ref="inputBox" :type="inline?'text':'textarea'" content-type="rich" :rows="2"
				@focus="onInputFocus" @blur="onInputBlur" @keyup.enter.ctrl.exact.native="handlerSubmit"
				v-model="inputContent" :placeholder="'说点什么吧...'" :focused="showInlineButton" class="input-box">
				<div v-if="inline" :class="['input-append',{hasbg:!showInlineButton}]" slot="append">
					<emoji-picker ref="emojiPicker" trigger-pick="click" @activated="inputBoxFocused=true"
						@selected="handlerEmojiSelected" picker-position="left" :button-text-visible="false">
					</emoji-picker>
				</div>
			</input-box>
			<transition name="button">
				<el-button  ref="button" type="primary" size="mini"
					:disabled="!inputContent" v-show="showInlineButton && inline">{{buttonText}}</el-button>
				<!-- <div
          @click="handlerSubmit"
          class="submit-button inline"
          :disabled="!inputContent"
          ref="button"
          v-show="showInlineButton && inline"
        >{{buttonText}}</div> -->
			</transition>
		</div>
		<div class="footer-action" v-if="!inline">
			<emoji-picker trigger-pick="click" @activated="$refs.inputBox.focus()" @selected="handlerEmojiSelected">
			</emoji-picker>
			<span class="submit-tiptext">Ctrl + Enter</span>
			<div @click="handlerSubmit" class="submit-button" :disabled="!inputContent">{{buttonText}}</div>
		</div>
	</div>
</template>
<script>
	import InputBox from './input-box'
	import EmojiPicker from './emoji-picker'
	export default {
		name: 'comment-editor',
		components: {
			InputBox,
			EmojiPicker
		},
		data() {
			return {
				active: false,
				inputContent: '',
				inputBoxFocused: false
			}
		},

		props: {
			buttonText: {
				type: String,
				default: '提交'
			},
			inline: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			showInlineButton() {
				return !!(this.inputBoxFocused || this.inputContent)
			}
		},
		destroyed() {
			document.removeEventListener('click', this.hideButton)
		},
		mounted() {
			document.addEventListener('click', this.hideButton)
		},
		methods: {
			focus() {
				this.$refs.inputBox.focus()
			},
			clearContent(){
				this.$refs.inputBox.clear()
			},
			hideButton(e) {
				if (this.$refs.container.contains(e.target)) {
					return
				}

				if (!this.$refs.container.contains(e.target)) {
					this.inputBoxFocused = false
				}
			},
			onInputFocus(e) {
				this.inputBoxFocused = true
			},
			onInputBlur(e) {
				if (this.$refs.container.contains(e.target)) {
					return
				}

				this.inputBoxFocused = false
			},
			handlerSubmit(e) {
				if (e.target.hasAttribute('disabled')) {
					return
				}

				this.$emit('submit', this.inputContent)
			},

			handlerEmojiSelected(e) {
				this.$refs.inputBox.focus()
				const clonedNode = e.target.cloneNode(true)
				clonedNode.style.verticalAlign = 'text-top'
				document.execCommand('insertHTML', false, clonedNode.outerHTML)
			}
		}
	}
</script>

<style scoped >
.input-wrapper {
  line-height: 20px;
}
.input-wrapper.inline {
  display: flex;
}
.input-wrapper.inline .input-box {
  flex: 1;
  margin-right: 14px;
}
.input-wrapper .input-append {
  width: 30px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.input-wrapper .input-append.hasbg {
  background: #eee;
}
.footer-action {
  line-height: 20px;
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.submit-tiptext {
  margin-left: auto;
  margin-right: 4px;
  font-size: 14px;
  color: #ccc;
}
.submit-button {
  align-self: flex-end;
  transition: all 0.2s;
  background: #409eff;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  padding: 6px 10px;
  color: white;
  user-select: none;
}
.submit-button.button-enter,
.submit-button.button-leave-to {
  margin-left: -40px;
  transform: scale(0, 0);
}
.submit-button[disabled] {
  cursor: not-allowed;
  background: #66b1ff;
}
.submit-button:hover {
  background: #66b1ff;
}
.submit-button:not([disabled]):active {
  background: #3a8ee6;
}

</style>
